<template>
	<view style="overflow-y: auto;">
		<u-swiper name='image' border-radius='1' :duration='duration' :interval='interval' :height="height"
			:list="swipperList">
		</u-swiper>
		<view class="header">
			<view class="title">
				{{good.title}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				物品简介
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				{{good.introduce}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				丢失地址
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				{{good.address}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				寻物流程
			</view>
		</view>
		<view class="info">
			<u-steps style="width: 100%;" :list="numList" active-color="#4BC26A" :current="4"></u-steps>
		</view>
		<view class="info-fa">
			<view class="fa-left"></view>
			<view class="goodsInfo">
				取物方式
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				自行协商.自提|送物上门|约定取物点|当面确认
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				发布时间
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				{{good.createTime}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				联系方式
			</view>
		</view>
		<view class="useInfo">
			<view class="title-desc">
				电话:{{good.phone}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad, onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import {hasCollectApi,collectApi} from '../../src/api/goods.js'
	//物品信息
	const good = reactive({})
	//轮播图高度
	const height = ref('300')
	//是否显示面板指示点
	const indicatorDots = ref(true)
	//是否自动播放
	const autoplay = ref(true)
	//自动切换时间间隔
	const interval = ref(2000)
	//滑动动画时长
	const duration = ref(500)
	//轮播图数据
	const swipperList = ref([])
	//寻物流程
	const numList = ref(
		[{
			name: '发布信息'
		}, {
			name: '电话沟通'
		}, {
			name: '当面确认'
		}, {
			name: '寻物完成'
		}]
	)
	
	onLoad((option) => {
		console.log(option)
		//转换为json
		let goods = JSON.parse(option.goods)
		//把传递过来的数据设置到上面定义的good里面
		Object.assign(good, goods)
		if (goods.image) {
			swipperList.value = goods.image.split(",")
		}
	})
</script>

<style lang="scss">
	// page{
	// 	height: 100%;
	// }
	.shitem{
		height: 14px;
		line-height: 14px;
		width: 20px;
	}
	.sharebutton{
		display: flex;
		flex-direction: column;
		padding: 0;
		font-size: 20rpx;
		background-color: #FFF;
	}
	button::after{
		border: 0;
	}
	.header {
		display: flex;

	}

	.title {
		color: #303133;
		font-weight: bold;
		font-size: 30rpx;
		padding: 20rpx;
	}

	.info-fa {
		display: flex;
		align-items: center;
	}

	.fa-left {
		width: 1px;
		height: 12px;
		border-left: 3px solid #4BC26A;
		margin-left: 10px;
	}

	.goodsInfo {
		padding: 5px;
		color: #4BC26A;
	}

	.info {
		display: flex;
		align-items: center;
		background-color: #FFF;
		margin-bottom: 25px;
		padding: 0px 20px;
	}

	.useInfo {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		// margin-bottom: 20px;
	}
</style>
